<template>
    <div class="app">
        <van-sticky>
            <van-nav-bar :title="title" left-text="" v-show="isShowNavbar" @click-left="$router.back()" left-arrow />
        </van-sticky>

        <router-view></router-view>


    </div>
</template>
<script>
export default {
    data() {
        return {
            isShowNavbar: false,
            title: "明德Shoping",
            isOnLine: navigator.online,
        };
    },
    watch: {
        '$route': {
            handler: function (newRoute, oldRoute) {
                // console.log('app-watch')
                // 是主页则隐藏navbar,否则显示
                // 页面刷新 
                let { isMainPage, title } = newRoute.meta
                this.title = title;
                if (isMainPage) {
                    this.isShowNavbar = false
                } else {
                    this.isShowNavbar = true
                }
            },
            // 立即执行（刷新也会执行）
            immediate: true
        },
        // watch监听网络的状态
        isOnLine() {
            this.isOnLine === false && this.$toast.fail("网络异常，请检查网络");
            this.isOnLine === true && this.$toast.success("网络已经连接");
        }
    },

    methods: {
        updateNetworkStatu(e) {
            this.isOnLine = e.type === "online" ? true : false;
        },
    },
    mounted() {
        window.addEventListener("online", this.updateNetworkStatu);
        window.addEventListener("offline", this.updateNetworkStatu);
    }

}
</script>
<style lang="scss">
html {

    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
}

.app {
    min-width: 320px;
    max-width: 750px;
    margin: auto;
    font-family: PingFangSC-Regular;

    .my-swipe {
        .van-swipe-item {
            height: 200px;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>

